<template>
  <div>
    <!--首页tab滚动切换模块 可左右滑动切换-->
    <!--<div class=" cjy-scroll " style="overflow-x: scroll;height: 2.5rem ">-->
    <div class="cjy-outer" ref="navhead" :style="{background:backGroundColor} ">

      <ul class="cjy-list " style="min-width: 100%" @click='test'>

        <!--滑动位置提示-->
        <li class="cjy-slder">
          <div
            style="position: absolute; bottom: 0;width: 100%; height: 1px;bottom:0; background: rgb(234, 234, 234); ">
          </div>
          <div class="cjy-active-slider" ref="activeSlider"
               :style="{background: styleConfig.colorStyle}"></div>
        </li>
        <!--滑动位置提示end-->
        <!--每个分类选项按钮-->
        <li class="cjy-tab-item cjy-tab-item-height"
            v-for="(item, index) in titleInfor" :key="index"
            :class="{'active-list':activeList == index}"
            :style="activeList == index ? activeStyle:normalStyle"
            style="transition: all 0.5s;"
            @click=" changeIndex(index)" ref="titleLi">
          <!--:style="{color: activeList == index ?styleConfig.colorStyle:'' , width:width}"-->

          {{item.goodsClassName}}
        </li>
        <!--每个分类选项按钮end-->

        <li v-if="titleInfor.length>4 &&pullDownMemu" class="cjy-tab-item cjy-tab-item-height"
            style="width:2rem!important;">
        </li>
      </ul>

      <!--下拉菜单按键-->
      <!--v-if="titleInfor.length > 4 &&pullDownMemu && !classifyClum" -->
      <div v-if=" titleInfor.length>4 &&pullDownMemu" class="classify_select"
           style="height: 2rem;position:absolute!important; z-index: 10"
           @click="showPopUp">
        <em></em>
      </div>
      <!--下拉菜单按键end-->
      <!--弹出分类选择-->

      <pop-up ref="popUp">
        <tap-select-box
          :titleInfor="titleInfor"
          @hidePopUp="hidePopUp"
          style="width: 100%">
        </tap-select-box>
      </pop-up>
    </div>


  </div>
</template>

<script>
  import BScroll from 'better-scroll';
  import PopUp from '@/components/PopUps';
  import TapSelectBox from '@/components/TapSelectBox';

  export default {
    data() {
      return {
        classifyClum: false, //控制下拉菜单的
        backGroundColor: 'rgba(255, 255, 255, 0.8)',
        colorStyle: '',
        normalStyle: {},
        activeStyle: {},
        isSupportTransfrom: true,
      };
    },
    props: {
      pullDownTitle: {
        type: String,
        default: '分类',
      },
      //下拉菜单
      pullDownMemu: {
        type: Boolean,
        default: true,
      },
      titleInfor: {
        type: Array,
        //传入的数据如下 分类名称必传
        default: () => [],
      },
      styleConfig: {
        type: Object,
        default: () => {
          return {
            colorStyle: '#299a28',
            activeTextColor: '#299a28',
            activeBorderColor: '299a28',
            activeBackgroundColor: '',
            normalColor: 'black',
          };
        },
      },

      width: {
        type: String,
        default: '',
      },
    },
    components: {TapSelectBox, PopUp},
    watch: {
      activeList(newData) {
        setTimeout(() => {
          this.tapMove(newData);
        }, 50);
      },

      titleInfor() {
        this.scroll.refresh();
      },
      $route() {
        this.classifyClum = false;
      },
      styleConfig() {
        this.initStyleConfig();
      },
    },
    methods: {
      test() {
        console.log('testTouch');
      },
      //tap栏滚动
      tapMove(newData, time) {
        var testDiv = this.$refs.titleLi;
        var index = newData;
        var activeTitle = testDiv ? testDiv[index] : '';
        var scrollLeft;
        var outerWidth = this.$refs.navhead ? this.$refs.navhead.offsetWidth : 375;
        if (!activeTitle) {
          return;
        }
        time = time == 0 || time ? time : 500;
        scrollLeft = Math.max(0, activeTitle.offsetLeft - outerWidth / 2 + activeTitle.offsetWidth / 2);
        scrollLeft = Math.min(scrollLeft, this.scroll.scrollerWidth - outerWidth);

        this.scroll.scrollTo(-scrollLeft, 0, time, 'easing');

        this.sliderMove('0.5s'); //控制滑动条的移动
      },
      closeClassifyClum() {
        this.classifyClum = false;
      },

      //更改滑动条的位置和大小
      sliderMove(time) {
        setTimeout(() => {
          var activeTitleLi = this.$refs.titleLi ? this.$refs.titleLi[this.activeList] : '';
          var activeSlider = this.$refs.activeSlider;
          if (!activeTitleLi) {
            return;
          }
          if (time) {
            activeSlider.style.transition = time;
          } else {
            activeSlider.style.transition = 'none';
          }
          if (this.isSupportTransfrom) {
            activeSlider.style.transform = `translatex( ${activeTitleLi.offsetLeft}px)`;
          } else {
            activeSlider.style.left = `${activeTitleLi.offsetLeft}px`;
          }
          activeSlider.style.width = activeTitleLi.offsetWidth + 'px';
        }, 50);
      },

      //将所index值传入Vuex  获取index的方法为 this.$store.state.jyM\n\nodules.classifyIndex 直接复制不谢
      changeIndex(index) {
        this.$store.dispatch('cjy/changeClassifyIndex', index);
      },
      showPopUp() {
        this.$emit('showPopUp');
        this.$refs.popUp.showPopUp();
      },
      hidePopUp() {
        this.$refs.popUp.hidePopUp();
      },
      initStyleConfig() {
        var styleConfig = this.styleConfig;

        this.normalStyle = {
          fontSize: styleConfig.normalFontSize || '',
          color: styleConfig.normalTextColor || '',
          borderColor: styleConfig.normalBorderColor || '',
          backgroundColor: styleConfig.normalBackgroundColor || '',
        };

        this.activeStyle = {
          fontSize: styleConfig.colorStyle || '',
          color: styleConfig.activeTextColor || '299a28',
          borderColor: styleConfig.activeBorderColor || '',
          backgroundColor: styleConfig.activeBackgroundColor || '',
        };
      },
    },
    computed: {
      activeList() {
        return this.$store.state.cjy.classifyIndex;
      },
    },
    created() {
      this.isSupportTransfrom = document.body.style.transform != undefined;
    },
    mounted() {
      this.initStyleConfig();

      this.$nextTick(() => {
        var scroll = new BScroll(this.$refs.navhead, {
          startX: 0,
          startY: 0,
          scrollX: true,
          scrollY: false,
          click: true,
          bounce: false,
        });
        this.scroll = scroll;
        this.tapMove(this.activeList, 0);
        this.sliderMove();
      });
    },
    updated() {
      this.$nextTick(() => {
        this.scroll.refresh();
        var maxIndex = this.titleInfor.length - 1 || 0;
        if (maxIndex < this.activeList) {
          this.$store.dispatch('cjy/changeClassifyIndex', maxIndex);
        }
      });
    },
  };
</script>

<style scoped>
  .classify_select {
    right: 0;
    top: 0;
  }

  .cjy-tab-item {
    padding: 0 0.3rem;
    text-align: center;
    overflow: hidden;
    text-overflow: clip;
    word-break: break-all;
    white-space: inherit;
    /*border-bottom: 2px solid transparent;*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*border-bottom-width: 2px;*/
    /*border-bottom-style: solid;*/
    /*border-bottom-color: transparent;*/
  }

  .cjy-tab-item-height {
    height: 100%;
    width: 4.5rem;
    line-height: 2.2rem;
    font-size: 0.7rem;
  }

  .active-list {
    /*border-bottom: 2px solid #0f8de0;*/
    color: #0f8de0;
  }

  .cjy-list {
    display: flex;
    position: absolute;
    height: 100%;
  }

  .cjy-outer {
    width: 100%;
    height: 2.2rem;
    position: relative;
    /*border-bottom:  solid rgb(234, 234, 234);*/
  }

  .cjy-scroll {
    position: relative;
    height: 100%;
    top: 3rem;
  }

  .aui-col-xs-3 {
    font-size: 0.7rem;
    min-width: 20%;
  }

  .nav-window-enter-active,
  .nav-window-leave-active {
    transition: all 0.2s;
  }

  .nav-window-enter,
  .nav-window-leave-to {
    transform: translatey(-100%);
    opacity: 0;
  }

  .cjy-slder {
    height: 100%;
    width: 0;
  }

  .cjy-active-slider {
    height: 100%;
    background: #0f8de0;
    position: absolute;
    bottom: 0;
    height: 2px;
    left: 0;
    z-index: 3;
    transition: all 0.5s;
  }

  .active-item {
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
  }

  .cjy-background-white {
    background: rgba(255, 255, 255, 0.8);
  }

  .cjy-tab-item-text {
    display: inline-block;
    line-height: 1rem;
    padding: 0 0.3rem;
  }
</style>
